<template>
  <div class="simple-login-test">
    <h2>简单登录测试</h2>
    <div class="form-group">
      <label>用户名：</label>
      <input v-model="username" type="text" placeholder="请输入用户名" />
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input v-model="password" type="password" placeholder="请输入密码" />
    </div>
    <button @click="testLogin">测试登录API</button>
    <div class="result">
      <h3>请求结果：</h3>
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'SimpleLoginTest',
  data() {
    return {
      username: '23002944',
      password: '123456',
      result: ''
    }
  },
  methods: {
    testLogin() {
      console.log('开始测试登录API')
      console.log('用户名:', this.username)
      console.log('密码:', this.password)
      
      // 记录开始时间
      const startTime = Date.now()
      
      axios.post('http://localhost:3000/api/user/login', {
        username: this.username,
        pwd: this.password
      })
        .then(response => {
          const endTime = Date.now()
          console.log('登录API响应时间:', endTime - startTime, 'ms')
          console.log('登录API响应:', response)
          this.result = JSON.stringify({
            status: 'success',
            data: response.data,
            headers: response.headers,
            statusText: response.statusText,
            statusCode: response.status,
            responseTime: endTime - startTime
          }, null, 2)
        })
        .catch(error => {
          const endTime = Date.now()
          console.error('登录API错误:', error)
          this.result = JSON.stringify({
            status: 'error',
            message: error.message,
            error: error.toString(),
            responseTime: endTime - startTime
          }, null, 2)
        })
    }
  }
}
</script>

<style scoped>
.simple-login-test {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 50px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #66b1ff;
}

.result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>